// 新建仓库
<template>
  <div class="divWarehouseAdd">
    <div class="divForm">
      <!-- 表单头 -->
      <el-form ref="form" :model="form">
        <!-- label-width="20px" -->
        <el-row :gutter="20">
          <el-col :span="8">
            <div class="grid-content bg-purple">
              <el-form-item>
                <span>仓库编号</span>
                <el-input v-model="form.code" placeholder="请选择" :disabled="true" />
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="grid-content bg-purple-light">
              <el-form-item  >
                <span>仓库名称</span>
                <el-input v-model="form.name" placeholder="请选择" />
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="grid-content bg-purple">
              <el-form-item>
                <span>仓库名称</span>
                <div>
                  <!-- / 仓库类型 中转仓:ZZ、加工仓:JG、储备仓:CB、冷藏仓:LC -->
                  <el-select v-model="form.type" style="width: 100%;" placeholder="请选择" clearable>
                    <el-option label="中转仓" value="ZZ" />
                    <el-option label="加工仓" value="JG" />
                    <el-option label="储备仓" value="CB" />
                    <el-option label="冷藏仓" value="LC" />
                  </el-select>
                </div>
              </el-form-item>
            </div>
          </el-col>
        </el-row>
        <!-- 第二行 -->
        <el-row>
          <el-col :span="16"><div class="grid-content bg-purple">
            <el-form-item>
              <span>省/市/区</span>
              <div>
                <!-- <el-select v-model="form.region" style="width: 100%;" placeholder="请选择" clearable> -->
                <el-cascader
                  v-model="selectedOptions"
                  size="large"
                  :options="options"
                  style="width: 100%;"
                  :props="{ expandTrigger: 'hover' }"
                  @change="handleChange"
                />
                <!-- </el-select> -->
              </div>
            </el-form-item>
          </div>
          </el-col>
          <el-col :span="8"><div class="grid-content bg-purple" /></el-col>
        </el-row>
        <!-- 第三行 -->
        <el-row :gutter="20">
          <el-col :span="16"><div class="grid-content bg-purple">
            <el-form-item>
              <span>详细地址</span>
              <div>
                <el-input v-model="form.address" placeholder="请输入" />
              </div>
            </el-form-item>
          </div>
          </el-col>
          <el-col :span="8"><div class="grid-content bg-purple">
            <el-form-item>
              <span>仓库状态</span>
              <div>
                <el-radio-group v-model="form.status">
                  <el-radio label="1">启用</el-radio>
                  <el-radio label="0">停用</el-radio>
                  <!-- <el-radio  label="启用" /> -->
                  <!-- <el-radio  label="停用" /> -->
                </el-radio-group>
              </div>
            </el-form-item>
          </div>
          </el-col>
        </el-row>
        <!-- 第四行 -->
        <el-row :gutter="20">
          <el-col :span="8">
            <div class="grid-content bg-purple">
              <el-form-item>
                <span>仓库面积</span>
                <el-input v-model="form.surface" type="number" placeholder="请输入" />
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="grid-content bg-purple-light">
              <el-form-item>
                <span>负责人</span>
                <el-input v-model="form.personName" placeholder="请输入" />
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="grid-content bg-purple">
              <el-form-item>
                <span>联系电话</span>
                <div>
                  <el-input v-model="form.phone" placeholder="请输入" />
                </div>
              </el-form-item>
            </div>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="buttonBox">
      <el-button round class="unimportanceButton" @click="goback">返回</el-button>
      <el-button round class="minorImportantButton" @click="open">提交</el-button>
    </div>
  </div>
</template>

<script>
import { regionData, CodeToText } from 'element-china-area-data'
import { geiAddId, AddHouseList, GETWarehouseList, biNewHouseList } from '@/api/index'
export default {
  data() {
    return {
      options: regionData,
      selectedOptions: [],
      // 控制表单发起的是修改还是新建请求
      submitType: null,
      // 表单数据
      form: {
        area: '110101', // 城市区id
        city: '119900', // 城市区id
        code: '', // 仓库编码
        location: '北京市/市辖区/东城区', // 城市区
        name: '仓库001', // 名字
        personName: '哭哭侠', // 负责人
        phone: '13666666666', // 联系电话
        province: '110000', // 城市区id
        status: '1', // 仓库状态
        surface: '10086', // 仓库面积
        type: 'ZZ', // 仓库类型
        address: 'm78新云'// 详情地址
      }
    }
  },
  created() {
    this.getaddid()
    console.log(this.$route.query.id)
    if (this.$route.query.id) {
      console.log('yes')
      this.getOldlist()
      this.submitType = true
    } else {
      console.log('no')
      this.submitType = false
    }
  },
  methods: {
    // 发起请求获取数据
    async getOldlist() {
      const res = await GETWarehouseList({ id: this.$route.query.id })
      this.form = res.data.data.records[0]
      this.selectedOptions = this.form.area
      this.form.status = this.form.status + ''
      console.log(this.form)
    },
    // 联级菜单
    // handleChange(value) {
    //   console.log(value)
    // },
    goback() {
      this.$router.go(-1)
    },
    handleChange() {
      let loc = ''
      for (let i = 0; i < this.selectedOptions.length; i++) {
        loc += CodeToText[this.selectedOptions[i]] + '/'
      }
      this.form.area = this.selectedOptions[0]
      this.form.city = this.selectedOptions[1]
      this.form.province = this.selectedOptions[2]
      this.form.location = loc.substring(0, loc.length - 1)
      console.log(this.form)
    },
    // 提交表单  新建仓库
    open() {
      if (this.submitType) {
        this.$confirm('此操作将修改仓库, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          center: true
        }).then(async() => {
          this.changeList()
          this.$message({
            type: 'success',
            message: '修改成功!'
          })
          this.$router.go(-1)
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消修改'
          })
        })
      } else {
        this.$confirm('此操作将添加仓库, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          center: true
        }).then(async() => {
          await AddHouseList(this.form)
          this.$message({
            type: 'success',
            message: '添加成功!'
          })
          this.$router.go(-1)
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消添加'
          })
        })
      }
    },

    async getaddid() {
      const res = await geiAddId()
      console.log(res.data.data)
      this.form.code = res.data.data
    },
    async changeList() {
      const res = await biNewHouseList(this.form)
      this.form.status = 1
      console.log(res)
    }
  }

}
</script>

<style lang='scss' scoped>
.divWarehouseAdd{
    height: 509px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 0 6px 0 rgb(144 142 142 / 17%);
    margin-top: 20px;
    margin-left: 29px;
    margin-right: 29px;
    padding-top: 31px;
    padding-bottom: 30px;
}
 .divForm {
    padding-left: 30px;
    padding-right: 30px;
}
.buttonBox {
    padding: 25px 0 0;
    margin: 0 -30px -5px;
    border-top: 1px solid #f5efee;
    text-align: center;
}
.el-button.is-round {
    border-radius: 20px;
    padding: 12px 47px;
}
.unimportanceButton{
    background: #f8f5f5;
    color: #332929;
}
.minorImportantButton{
    background: #ffb200;
    color: #332929;
}
// 下拉框
.el-select-dropdown__item:hover{
       color:#ffb200;
       background-color: #fff6e2;
   }
</style>
<style>
/* input背景色 */
.el-input__inner {
  background-color: #f8f5f5;
}
.el-card{
  border-radius: 18px;
}
</style>
